<template>
  <div>
    <div class="head">
      <a class="back" @click="doGoback">
        <img src="../../../../assets/1first/5-8搜索结果/back.png" alt="">
      </a>
      <div>限时断货</div>
      <div class="share">
        <router-link to="/shopcart">
          <img src="../../../../assets/1first/限时断货/gouwuche.png" alt="">
        </router-link>
        <img src="../../../../assets/1first/修炼秘籍/share.png" alt="" @click="doShow">
        <router-link to="/shouye">
          <img src="../../../../assets/1first/限时断货/shouye.png" alt="">
        </router-link>
      </div>
    </div>
    <div class="bottomDiv">
      <div class="textDiv">
        宝贝即将售罄,再不抢就没了哦~
      </div>
      <ul>
        <li class="mianbaoList" v-for="(item, index) in aProduct ">
          <div class="left">
            <img :src="aProduct[index].imgUrl" alt="">
            <!---->
          </div>
          <div class="right">
            <h3 class="title">{{item.title}}</h3>
            <p class="desc">{{item.desc}}</p>
            <div>
              <div class="fl price">
                <span>¥</span>
                {{item.price}}
              </div>
              <div class="fr goShopDiv">
                <div class="goShop">马上抢 ></div>
                <div class="timeDiv">
                  还剩
                  <span class="time">
                    01:59:59
                  </span>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <wang-share v-if="isShow" ref="child" @cus-event="addShow($event)"></wang-share>
  </div>
</template>
<script>
  import WangShare from '../../../../components/WangHeader/WangShare/WangShare'
  import Vue from 'vue'
  export default {
    data() {
      return {
        isShow: false,
        aProduct: []
      }
    },
    methods: {
      doGoback() {
        this.$router.go(-1)
      },
      addShow(e) {
        this.isShow = e
      },
      doShow() {
        this.isShow = true
      }
    },
    components: {
      WangShare
    },
    created() {
      // console.log(Vue.axios);
      Vue.axios.post('/api/get').then((res)=> {
        console.log(res.data);
        this.aProduct = res.data
      })
    }
  }
</script>
<style scoped>
  .head{
    position: relative;
    text-align: center;
    background: #e53e42;
    color: #fff;
    line-height: 2.13rem;
    font-size: 0.8rem;
  }
  .back{
    position: absolute;
    left: 0;
    margin-left: 0.44rem;
  }
  .back img{
    width: 0.51rem;
  }
  .share{
    position: absolute;
    right: 0;
    margin-right: 0.44rem;
    top: 0;
  }
  .share img{
    width: 0.8rem;
  }
  .textDiv{
    line-height: 1.78rem;
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #4d4d4d;
    padding-left: 0.44rem;
  }
  .mianbaoList{
    padding: 0.44rem;
    border-bottom: 1px solid #ccc;
    display: flex;
    background: #fff;
  }
  .left{
    width: 4rem;
    flex: none;
  }
  .left img{
    width: 100%;
  }
  .right{
    flex: 1;
    margin-left: 0.44rem;
  }
  .title{
    font-size: 0.67rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.67rem;
    color: #333333;
    margin-bottom: 0.44rem;
  }
  .desc{
    font-size: 0.53rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.53rem;
    color: #4d4d4d;
    margin-bottom: 0.44rem;
  }
  .price{
    font-size: 0.62rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.62rem;
    color: #e53e42;
  }
  .goShopDiv{
    text-align: center;
  }
  .goShop{
    width: 2.67rem;
    height: 0.89rem;
    line-height: 0.89rem;
    color: #ffffff;
    text-align: center;
    background: #e53e42;
    border-radius: 0.44rem;
    font-size: 0.4rem;
  }
  .timeDiv{
    font-size: 0.356rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.7rem;
    color: #4d4d4d;
  }
  .time{
    color: #e53e42;
  }
</style>
